import React from 'react';
import {numberHandle, parsePercent} from '~/utils/number';

import CommonEchart from '../../common/CommonEchart';
import withPannel from './withPannel';

const tooltipCallback = params => {
    let html = '';
    let name = '';
    if (Array.isArray(params)) {
        html = params.reverse().map(entry => {
            const {
                marker,
                seriesName,
                data: {value = '', proportion = ''} = {},
                name: entryName
            } = entry;
            name = entryName;
            return `${marker}${seriesName} ${numberHandle(value, 2)} (${parsePercent(proportion, 0)})`;
        });
    }

    return `${name}<br />${html.join('<br >')}`;
};

const labelFormatter = (params = {}) => {
    const {
        data: {proportion = 0} = {}
    } = params;
    return proportion ? parsePercent(proportion, 0) : '';
};

const extendOptions = {
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        left: 'left'
    },
    xAxis: {
        common: {
            axisLabel: {
                // rotate: 30
            }
        }
    },
    yAxis: {
        common: {
            splitLine: {show: false},
            name: '',
            axisLabel: {
                formatter: value => numberHandle(value, 0)
            }
        }
    },
    grid: {
        left: 40,
        right: '3%',
        bottom: 20,
        containLabel: true
    },
    series: {
        common: {
            stack: '总量',
            barMaxWidth: 30,
            barGap: '100%',
            barCategoryGap: '50%',
            // label: {show: true, position: 'inside', formatter: labelFormatter}
        }
    }
};

const handleSeries = (series = []) => {
    // 获取series.data最大长度
    let maxLength = 0;
    series.forEach(sItem => {
        if (Array.isArray(sItem?.data)) {
            if (sItem.data.length > maxLength) {
                maxLength = sItem.data.length;
            }
        }
    });
    // 汇总series.data各个位置的总和
    const totalList = Array(maxLength).fill(0);
    series.forEach(sItem => {
        const sItemData = sItem?.data;
        if (Array.isArray(sItemData)) {
            sItemData.forEach((sidItem, sidIdx) => {
                const {value = '0'} = sidItem;
                totalList[sidIdx] += parseFloat(value);
            });
        }
    });
    // 重新设置series.data每一项的proportion
    series.forEach(sItem => {
        const sItemData = sItem?.data;
        if (Array.isArray(sItemData)) {
            sItem.data = sItemData.map((sidItem, sidIdx) => {
                const {value = '0'} = sidItem;
                const proportion =
                    totalList[sidIdx] === 0
                        ? 0
                        : parseFloat(value) / totalList[sidIdx];
                return {
                    ...sidItem,
                    proportion
                };
            });
        }
    });
    return [...series];
};

const StudentStructureBarChart = props => {
    const {dataSource, unitId} = props;
    if (dataSource?.chart) {
        const series = dataSource?.chart?.series;
        const newSeries = handleSeries(series);
        dataSource.chart.series = newSeries;
    }
    return (
        <CommonEchart
            {...props}
            id={unitId}
            extendEchartsOptions={extendOptions}
            dataSource={dataSource}
        />
    );
};

export default withPannel(StudentStructureBarChart);
